<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="j" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Perspective Seat Preview</title>
    <meta name="description"
          content="An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room."/>
    <meta name="keywords" content="cinema, seat booking, seating plan, perspective, 3d"/>

    <link rel="stylesheet" type="text/css" href="../css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="../css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="../css/component.css"/>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../js/modernizr-custom.js"></script>
</head>
<body>
<header class="header">
    <h1 class="header__title">影院座椅预览</h1>
    <p class="note note--screen">请查看更大屏幕</p>
    <p class="note note--support">很抱歉，但您的浏览器不支持preserve-3d！</p>
</header>
<div class="container">
    <div class="cube">
        <div class="cube__side cube__side--front"></div>
        <div class="cube__side cube__side--back">
            <div class="screen">
                <div class="video">
                    <video class="video-player" src="http://preview.ewang.com/movie/videos/854x4806cd63da6e82c4b5eb76a26d5aa29f3ee.mp4" preload="auto" poster="../media/sintel.jpg">
                        <source src="http://preview.ewang.com/movie/videos/854x4806cd63da6e82c4b5eb76a26d5aa29f3ee.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
                        <p>对不起，您的浏览器不支持这种视频格式。</p>
                    </video>
                    <button class="action action--play action--shown" aria-label="Play Video"></button>
                </div>
                <div class="intro intro--shown">
                    <div class="intro__side">
                        <h2 class="intro__title">
                            <span class="intro__up">开放的电影院</span>
                            <span class="intro__down">影片 <span class="intro__partial"><em>：</em> <a
                                    href="#">示例：噬魂剑</a></span></span>
                        </h2>
                    </div>
                    <div class="intro__side">
                        <button class="action action--seats">选择你的座位</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="cube__side cube__side--left"></div>
        <div class="cube__side cube__side--right"></div>
        <div class="cube__side cube__side--top"></div>
        <div class="rows rows--large">
            <div class="row">
                <div data-seat="1-1" class="row__seat"></div>
                <div data-seat="1-2" class="row__seat"></div>
                <div data-seat="1-3" class="row__seat"></div>
                <div data-seat="1-4" class="row__seat"></div>
                <div data-seat="1-5" class="row__seat"></div>
                <div data-seat="1-6" class="row__seat"></div>
                <div data-seat="1-7" class="row__seat"></div>
                <div data-seat="1-8" class="row__seat"></div>
                <div data-seat="1-9" class="row__seat"></div>
                <div data-seat="1-10" class="row__seat"></div>
                <div data-seat="1-11" class="row__seat"></div>
                <div data-seat="1-12" class="row__seat"></div>
                <div data-seat="1-13" class="row__seat"></div>
                <div data-seat="1-14" class="row__seat"></div>
                <div data-seat="1-15" class="row__seat"></div>
                <div data-seat="1-16" class="row__seat"></div>
                <div data-seat="1-17" class="row__seat"></div>
                <div data-seat="1-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="2-1" class="row__seat"></div>
                <div data-seat="2-2" class="row__seat"></div>
                <div data-seat="2-3" class="row__seat"></div>
                <div data-seat="2-4" class="row__seat"></div>
                <div data-seat="2-5" class="row__seat"></div>
                <div data-seat="2-6" class="row__seat"></div>
                <div data-seat="2-7" class="row__seat"></div>
                <div data-seat="2-8" class="row__seat"></div>
                <div data-seat="2-9" class="row__seat"></div>
                <div data-seat="2-10" class="row__seat"></div>
                <div data-seat="2-11" class="row__seat"></div>
                <div data-seat="2-12" class="row__seat"></div>
                <div data-seat="2-13" class="row__seat"></div>
                <div data-seat="2-14" class="row__seat"></div>
                <div data-seat="2-15" class="row__seat"></div>
                <div data-seat="2-16" class="row__seat"></div>
                <div data-seat="2-17" class="row__seat"></div>
                <div data-seat="2-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="3-1" class="row__seat"></div>
                <div data-seat="3-2" class="row__seat"></div>
                <div data-seat="3-3" class="row__seat"></div>
                <div data-seat="3-4" class="row__seat"></div>
                <div data-seat="3-5" class="row__seat"></div>
                <div data-seat="3-6" class="row__seat"></div>
                <div data-seat="3-7" class="row__seat"></div>
                <div data-seat="3-8" class="row__seat"></div>
                <div data-seat="3-9" class="row__seat"></div>
                <div data-seat="3-10" class="row__seat"></div>
                <div data-seat="3-11" class="row__seat"></div>
                <div data-seat="3-12" class="row__seat"></div>
                <div data-seat="3-13" class="row__seat"></div>
                <div data-seat="3-14" class="row__seat"></div>
                <div data-seat="3-15" class="row__seat"></div>
                <div data-seat="3-16" class="row__seat"></div>
                <div data-seat="3-17" class="row__seat"></div>
                <div data-seat="3-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="4-1" class="row__seat"></div>
                <div data-seat="4-2" class="row__seat"></div>
                <div data-seat="4-3" class="row__seat"></div>
                <div data-seat="4-4" class="row__seat"></div>
                <div data-seat="4-5" class="row__seat"></div>
                <div data-seat="4-6" class="row__seat"></div>
                <div data-seat="4-7" class="row__seat"></div>
                <div data-seat="4-8" class="row__seat"></div>
                <div data-seat="4-9" class="row__seat"></div>
                <div data-seat="4-10" class="row__seat"></div>
                <div data-seat="4-11" class="row__seat"></div>
                <div data-seat="4-12" class="row__seat"></div>
                <div data-seat="4-13" class="row__seat"></div>
                <div data-seat="4-14" class="row__seat"></div>
                <div data-seat="4-15" class="row__seat"></div>
                <div data-seat="4-16" class="row__seat"></div>
                <div data-seat="4-17" class="row__seat"></div>
                <div data-seat="4-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="5-1" class="row__seat"></div>
                <div data-seat="5-2" class="row__seat"></div>
                <div data-seat="5-3" class="row__seat"></div>
                <div data-seat="5-4" class="row__seat"></div>
                <div data-seat="5-5" class="row__seat"></div>
                <div data-seat="5-6" class="row__seat"></div>
                <div data-seat="5-7" class="row__seat"></div>
                <div data-seat="5-8" class="row__seat"></div>
                <div data-seat="5-9" class="row__seat"></div>
                <div data-seat="5-10" class="row__seat"></div>
                <div data-seat="5-11" class="row__seat"></div>
                <div data-seat="5-12" class="row__seat"></div>
                <div data-seat="5-13" class="row__seat"></div>
                <div data-seat="5-14" class="row__seat"></div>
                <div data-seat="5-15" class="row__seat"></div>
                <div data-seat="5-16" class="row__seat"></div>
                <div data-seat="5-17" class="row__seat"></div>
                <div data-seat="5-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="6-1" class="row__seat"></div>
                <div data-seat="6-2" class="row__seat"></div>
                <div data-seat="6-3" class="row__seat"></div>
                <div data-seat="6-4" class="row__seat"></div>
                <div data-seat="6-5" class="row__seat"></div>
                <div data-seat="6-6" class="row__seat"></div>
                <div data-seat="6-7" class="row__seat"></div>
                <div data-seat="6-8" class="row__seat"></div>
                <div data-seat="6-9" class="row__seat"></div>
                <div data-seat="6-10" class="row__seat"></div>
                <div data-seat="6-11" class="row__seat"></div>
                <div data-seat="6-12" class="row__seat"></div>
                <div data-seat="6-13" class="row__seat"></div>
                <div data-seat="6-14" class="row__seat"></div>
                <div data-seat="6-15" class="row__seat"></div>
                <div data-seat="6-16" class="row__seat"></div>
                <div data-seat="6-17" class="row__seat"></div>
                <div data-seat="6-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="7-1" class="row__seat"></div>
                <div data-seat="7-2" class="row__seat"></div>
                <div data-seat="7-3" class="row__seat"></div>
                <div data-seat="7-4" class="row__seat"></div>
                <div data-seat="7-5" class="row__seat"></div>
                <div data-seat="7-6" class="row__seat"></div>
                <div data-seat="7-7" class="row__seat"></div>
                <div data-seat="7-8" class="row__seat"></div>
                <div data-seat="7-9" class="row__seat"></div>
                <div data-seat="7-10" class="row__seat"></div>
                <div data-seat="7-11" class="row__seat"></div>
                <div data-seat="7-12" class="row__seat"></div>
                <div data-seat="7-13" class="row__seat"></div>
                <div data-seat="7-14" class="row__seat"></div>
                <div data-seat="7-15" class="row__seat"></div>
                <div data-seat="7-16" class="row__seat"></div>
                <div data-seat="7-17" class="row__seat"></div>
                <div data-seat="7-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="8-1" class="row__seat"></div>
                <div data-seat="8-2" class="row__seat"></div>
                <div data-seat="8-3" class="row__seat"></div>
                <div data-seat="8-4" class="row__seat"></div>
                <div data-seat="8-5" class="row__seat"></div>
                <div data-seat="8-6" class="row__seat"></div>
                <div data-seat="8-7" class="row__seat"></div>
                <div data-seat="8-8" class="row__seat"></div>
                <div data-seat="8-9" class="row__seat"></div>
                <div data-seat="8-10" class="row__seat"></div>
                <div data-seat="8-11" class="row__seat"></div>
                <div data-seat="8-12" class="row__seat"></div>
                <div data-seat="8-13" class="row__seat"></div>
                <div data-seat="8-14" class="row__seat"></div>
                <div data-seat="8-15" class="row__seat"></div>
                <div data-seat="8-16" class="row__seat"></div>
                <div data-seat="8-17" class="row__seat"></div>
                <div data-seat="8-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="9-1" class="row__seat"></div>
                <div data-seat="9-2" class="row__seat"></div>
                <div data-seat="9-3" class="row__seat"></div>
                <div data-seat="9-4" class="row__seat"></div>
                <div data-seat="9-5" class="row__seat"></div>
                <div data-seat="9-6" class="row__seat"></div>
                <div data-seat="9-7" class="row__seat"></div>
                <div data-seat="9-8" class="row__seat"></div>
                <div data-seat="9-9" class="row__seat"></div>
                <div data-seat="9-10" class="row__seat"></div>
                <div data-seat="9-11" class="row__seat"></div>
                <div data-seat="9-12" class="row__seat"></div>
                <div data-seat="9-13" class="row__seat"></div>
                <div data-seat="9-14" class="row__seat"></div>
                <div data-seat="9-15" class="row__seat"></div>
                <div data-seat="9-16" class="row__seat"></div>
                <div data-seat="9-17" class="row__seat"></div>
                <div data-seat="9-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="10-1" class="row__seat"></div>
                <div data-seat="10-2" class="row__seat"></div>
                <div data-seat="10-3" class="row__seat"></div>
                <div data-seat="10-4" class="row__seat"></div>
                <div data-seat="10-5" class="row__seat"></div>
                <div data-seat="10-6" class="row__seat"></div>
                <div data-seat="10-7" class="row__seat"></div>
                <div data-seat="10-8" class="row__seat"></div>
                <div data-seat="10-9" class="row__seat"></div>
                <div data-seat="10-10" class="row__seat"></div>
                <div data-seat="10-11" class="row__seat"></div>
                <div data-seat="10-12" class="row__seat"></div>
                <div data-seat="10-13" class="row__seat"></div>
                <div data-seat="10-14" class="row__seat"></div>
                <div data-seat="10-15" class="row__seat"></div>
                <div data-seat="10-16" class="row__seat"></div>
                <div data-seat="10-17" class="row__seat"></div>
                <div data-seat="10-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="11-1" class="row__seat"></div>
                <div data-seat="11-2" class="row__seat"></div>
                <div data-seat="11-3" class="row__seat"></div>
                <div data-seat="11-4" class="row__seat"></div>
                <div data-seat="11-5" class="row__seat"></div>
                <div data-seat="11-6" class="row__seat"></div>
                <div data-seat="11-7" class="row__seat"></div>
                <div data-seat="11-8" class="row__seat"></div>
                <div data-seat="11-9" class="row__seat"></div>
                <div data-seat="11-10" class="row__seat"></div>
                <div data-seat="11-11" class="row__seat"></div>
                <div data-seat="11-12" class="row__seat"></div>
                <div data-seat="11-13" class="row__seat"></div>
                <div data-seat="11-14" class="row__seat"></div>
                <div data-seat="11-15" class="row__seat"></div>
                <div data-seat="11-16" class="row__seat"></div>
                <div data-seat="11-17" class="row__seat"></div>
                <div data-seat="11-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="12-1" class="row__seat"></div>
                <div data-seat="12-2" class="row__seat"></div>
                <div data-seat="12-3" class="row__seat"></div>
                <div data-seat="12-4" class="row__seat"></div>
                <div data-seat="12-5" class="row__seat"></div>
                <div data-seat="12-6" class="row__seat"></div>
                <div data-seat="12-7" class="row__seat"></div>
                <div data-seat="12-8" class="row__seat"></div>
                <div data-seat="12-9" class="row__seat"></div>
                <div data-seat="12-10" class="row__seat"></div>
                <div data-seat="12-11" class="row__seat"></div>
                <div data-seat="12-12" class="row__seat"></div>
                <div data-seat="12-13" class="row__seat"></div>
                <div data-seat="12-14" class="row__seat"></div>
                <div data-seat="12-15" class="row__seat"></div>
                <div data-seat="12-16" class="row__seat"></div>
                <div data-seat="12-17" class="row__seat"></div>
                <div data-seat="12-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="13-1" class="row__seat"></div>
                <div data-seat="13-2" class="row__seat"></div>
                <div data-seat="13-3" class="row__seat"></div>
                <div data-seat="13-4" class="row__seat"></div>
                <div data-seat="13-5" class="row__seat"></div>
                <div data-seat="13-6" class="row__seat"></div>
                <div data-seat="13-7" class="row__seat"></div>
                <div data-seat="13-8" class="row__seat"></div>
                <div data-seat="13-9" class="row__seat"></div>
                <div data-seat="13-10" class="row__seat"></div>
                <div data-seat="13-11" class="row__seat"></div>
                <div data-seat="13-12" class="row__seat"></div>
                <div data-seat="13-13" class="row__seat"></div>
                <div data-seat="13-14" class="row__seat"></div>
                <div data-seat="13-15" class="row__seat"></div>
                <div data-seat="13-16" class="row__seat"></div>
                <div data-seat="13-17" class="row__seat"></div>
                <div data-seat="13-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="14-1" class="row__seat"></div>
                <div data-seat="14-2" class="row__seat"></div>
                <div data-seat="14-3" class="row__seat"></div>
                <div data-seat="14-4" class="row__seat"></div>
                <div data-seat="14-5" class="row__seat"></div>
                <div data-seat="14-6" class="row__seat"></div>
                <div data-seat="14-7" class="row__seat"></div>
                <div data-seat="14-8" class="row__seat"></div>
                <div data-seat="14-9" class="row__seat"></div>
                <div data-seat="14-10" class="row__seat"></div>
                <div data-seat="14-11" class="row__seat"></div>
                <div data-seat="14-12" class="row__seat"></div>
                <div data-seat="14-13" class="row__seat"></div>
                <div data-seat="14-14" class="row__seat"></div>
                <div data-seat="14-15" class="row__seat"></div>
                <div data-seat="14-16" class="row__seat"></div>
                <div data-seat="14-17" class="row__seat"></div>
                <div data-seat="14-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="15-1" class="row__seat"></div>
                <div data-seat="15-2" class="row__seat"></div>
                <div data-seat="15-3" class="row__seat"></div>
                <div data-seat="15-4" class="row__seat"></div>
                <div data-seat="15-5" class="row__seat"></div>
                <div data-seat="15-6" class="row__seat"></div>
                <div data-seat="15-7" class="row__seat"></div>
                <div data-seat="15-8" class="row__seat"></div>
                <div data-seat="15-9" class="row__seat"></div>
                <div data-seat="15-10" class="row__seat"></div>
                <div data-seat="15-11" class="row__seat"></div>
                <div data-seat="15-12" class="row__seat"></div>
                <div data-seat="15-13" class="row__seat"></div>
                <div data-seat="15-14" class="row__seat"></div>
                <div data-seat="15-15" class="row__seat"></div>
                <div data-seat="15-16" class="row__seat"></div>
                <div data-seat="15-17" class="row__seat"></div>
                <div data-seat="15-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div id="16-1" class="row__seat"></div>
                <div data-seat="16-2" class="row__seat"></div>
                <div data-seat="16-3" class="row__seat"></div>
                <div data-seat="16-4" class="row__seat"></div>
                <div data-seat="16-5" class="row__seat"></div>
                <div data-seat="16-6" class="row__seat"></div>
                <div data-seat="16-7" class="row__seat"></div>
                <div data-seat="16-8" class="row__seat"></div>
                <div data-seat="16-9" class="row__seat"></div>
                <div data-seat="16-10" class="row__seat"></div>
                <div data-seat="16-11" class="row__seat"></div>
                <div data-seat="16-12" class="row__seat"></div>
                <div data-seat="16-13" class="row__seat"></div>
                <div data-seat="16-14" class="row__seat"></div>
                <div data-seat="16-15" class="row__seat"></div>
                <div data-seat="16-16" class="row__seat"></div>
                <div data-seat="16-17" class="row__seat"></div>
                <div data-seat="16-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="17-1" class="row__seat"></div>
                <div data-seat="17-2" class="row__seat"></div>
                <div data-seat="17-3" class="row__seat"></div>
                <div data-seat="17-4" class="row__seat"></div>
                <div data-seat="17-5" class="row__seat"></div>
                <div data-seat="17-6" class="row__seat"></div>
                <div data-seat="17-7" class="row__seat"></div>
                <div data-seat="17-8" class="row__seat"></div>
                <div data-seat="17-9" class="row__seat"></div>
                <div data-seat="17-10" class="row__seat"></div>
                <div data-seat="17-11" class="row__seat"></div>
                <div data-seat="17-12" class="row__seat"></div>
                <div data-seat="17-13" class="row__seat"></div>
                <div data-seat="17-14" class="row__seat"></div>
                <div data-seat="17-15" class="row__seat"></div>
                <div data-seat="17-16" class="row__seat"></div>
                <div data-seat="17-17" class="row__seat"></div>
                <div data-seat="17-18" class="row__seat"></div>
            </div>
            <div class="row">
                <div data-seat="18-1" class="row__seat"></div>
                <div data-seat="18-2" class="row__seat"></div>
                <div data-seat="18-3" class="row__seat"></div>
                <div data-seat="18-4" class="row__seat"></div>
                <div data-seat="18-5" class="row__seat"></div>
                <div data-seat="18-6" class="row__seat"></div>
                <div data-seat="18-7" class="row__seat"></div>
                <div data-seat="18-8" class="row__seat"></div>
                <div data-seat="18-9" class="row__seat"></div>
                <div data-seat="18-10" class="row__seat"></div>
                <div data-seat="18-11" class="row__seat"></div>
                <div data-seat="18-12" class="row__seat"></div>
                <div data-seat="18-13" class="row__seat"></div>
                <div data-seat="18-14" class="row__seat"></div>
                <div data-seat="18-15" class="row__seat"></div>
                <div data-seat="18-16" class="row__seat"></div>
                <div data-seat="18-17" class="row__seat"></div>
                <div data-seat="18-18" class="row__seat"></div>
            </div>
        </div>
        <!-- /rows -->
    </div><!-- /cube -->
</div><!-- /container -->
<div class="plan">
    <h3 class="plan__title">座位选择</h3>
    <div class="rows rows--mini">
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="1-1"></div>
            <div class="row__seat tooltip" data-tooltip="1-2"></div>
            <div class="row__seat tooltip" data-tooltip="1-3"></div>
            <div class="row__seat tooltip" data-tooltip="1-4"></div>
            <div class="row__seat tooltip" data-tooltip="1-5"></div>
            <div class="row__seat tooltip" data-tooltip="1-6"></div>
            <div class="row__seat tooltip" data-tooltip="1-7"></div>
            <div class="row__seat tooltip" data-tooltip="1-8"></div>
            <div class="row__seat tooltip" data-tooltip="1-9"></div>
            <div class="row__seat tooltip" data-tooltip="1-10"></div>
            <div class="row__seat tooltip" data-tooltip="1-11"></div>
            <div class="row__seat tooltip" data-tooltip="1-12"></div>
            <div class="row__seat tooltip" data-tooltip="1-13"></div>
            <div class="row__seat tooltip" data-tooltip="1-14"></div>
            <div class="row__seat tooltip" data-tooltip="1-15"></div>
            <div class="row__seat tooltip" data-tooltip="1-16"></div>
            <div class="row__seat tooltip" data-tooltip="1-17"></div>
            <div class="row__seat tooltip" data-tooltip="1-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="2-1"></div>
            <div class="row__seat tooltip" data-tooltip="2-2"></div>
            <div class="row__seat tooltip" data-tooltip="2-3"></div>
            <div class="row__seat tooltip" data-tooltip="2-4"></div>
            <div class="row__seat tooltip" data-tooltip="2-5"></div>
            <div class="row__seat tooltip" data-tooltip="2-6"></div>
            <div class="row__seat tooltip" data-tooltip="2-7"></div>
            <div class="row__seat tooltip" data-tooltip="2-8"></div>
            <div class="row__seat tooltip" data-tooltip="2-9"></div>
            <div class="row__seat tooltip" data-tooltip="2-10"></div>
            <div class="row__seat tooltip" data-tooltip="2-11"></div>
            <div class="row__seat tooltip" data-tooltip="2-12"></div>
            <div class="row__seat tooltip" data-tooltip="2-13"></div>
            <div class="row__seat tooltip" data-tooltip="2-14"></div>
            <div class="row__seat tooltip" data-tooltip="2-15"></div>
            <div class="row__seat tooltip" data-tooltip="2-16"></div>
            <div class="row__seat tooltip" data-tooltip="2-17"></div>
            <div class="row__seat tooltip" data-tooltip="2-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="3-1"></div>
            <div class="row__seat tooltip" data-tooltip="3-2"></div>
            <div class="row__seat tooltip" data-tooltip="3-3"></div>
            <div class="row__seat tooltip" data-tooltip="3-4"></div>
            <div class="row__seat tooltip" data-tooltip="3-5"></div>
            <div class="row__seat tooltip" data-tooltip="3-6"></div>
            <div class="row__seat tooltip" data-tooltip="3-7"></div>
            <div class="row__seat tooltip" data-tooltip="3-8"></div>
            <div class="row__seat tooltip" data-tooltip="3-9"></div>
            <div class="row__seat tooltip" data-tooltip="3-10"></div>
            <div class="row__seat tooltip" data-tooltip="3-11"></div>
            <div class="row__seat tooltip" data-tooltip="3-12"></div>
            <div class="row__seat tooltip" data-tooltip="3-13"></div>
            <div class="row__seat tooltip" data-tooltip="3-14"></div>
            <div class="row__seat tooltip" data-tooltip="3-15"></div>
            <div class="row__seat tooltip" data-tooltip="3-16"></div>
            <div class="row__seat tooltip" data-tooltip="3-17"></div>
            <div class="row__seat tooltip" data-tooltip="3-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="4-1"></div>
            <div class="row__seat tooltip" data-tooltip="4-2"></div>
            <div class="row__seat tooltip" data-tooltip="4-3"></div>
            <div class="row__seat tooltip" data-tooltip="4-4"></div>
            <div class="row__seat tooltip" data-tooltip="4-5"></div>
            <div class="row__seat tooltip" data-tooltip="4-6"></div>
            <div class="row__seat tooltip" data-tooltip="4-7"></div>
            <div class="row__seat tooltip" data-tooltip="4-8"></div>
            <div class="row__seat tooltip" data-tooltip="4-9"></div>
            <div class="row__seat tooltip" data-tooltip="4-10"></div>
            <div class="row__seat tooltip" data-tooltip="4-11"></div>
            <div class="row__seat tooltip" data-tooltip="4-12"></div>
            <div class="row__seat tooltip" data-tooltip="4-13"></div>
            <div class="row__seat tooltip" data-tooltip="4-14"></div>
            <div class="row__seat tooltip" data-tooltip="4-15"></div>
            <div class="row__seat tooltip" data-tooltip="4-16"></div>
            <div class="row__seat tooltip" data-tooltip="4-17"></div>
            <div class="row__seat tooltip" data-tooltip="4-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="5-1"></div>
            <div class="row__seat tooltip" data-tooltip="5-2"></div>
            <div class="row__seat tooltip" data-tooltip="5-3"></div>
            <div class="row__seat tooltip" data-tooltip="5-4"></div>
            <div class="row__seat tooltip" data-tooltip="5-5"></div>
            <div class="row__seat tooltip" data-tooltip="5-6"></div>
            <div class="row__seat tooltip" data-tooltip="5-7"></div>
            <div class="row__seat tooltip" data-tooltip="5-8"></div>
            <div class="row__seat tooltip" data-tooltip="5-9"></div>
            <div class="row__seat tooltip" data-tooltip="5-10"></div>
            <div class="row__seat tooltip" data-tooltip="5-11"></div>
            <div class="row__seat tooltip" data-tooltip="5-12"></div>
            <div class="row__seat tooltip" data-tooltip="5-13"></div>
            <div class="row__seat tooltip" data-tooltip="5-14"></div>
            <div class="row__seat tooltip" data-tooltip="5-15"></div>
            <div class="row__seat tooltip" data-tooltip="5-16"></div>
            <div class="row__seat tooltip" data-tooltip="5-17"></div>
            <div class="row__seat tooltip" data-tooltip="5-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="6-1"></div>
            <div class="row__seat tooltip" data-tooltip="6-2"></div>
            <div class="row__seat tooltip" data-tooltip="6-3"></div>
            <div class="row__seat tooltip" data-tooltip="6-4"></div>
            <div class="row__seat tooltip" data-tooltip="6-5"></div>
            <div class="row__seat tooltip" data-tooltip="6-6"></div>
            <div class="row__seat tooltip" data-tooltip="6-7"></div>
            <div class="row__seat tooltip" data-tooltip="6-8"></div>
            <div class="row__seat tooltip" data-tooltip="6-9"></div>
            <div class="row__seat tooltip" data-tooltip="6-10"></div>
            <div class="row__seat tooltip" data-tooltip="6-11"></div>
            <div class="row__seat tooltip" data-tooltip="6-12"></div>
            <div class="row__seat tooltip" data-tooltip="6-13"></div>
            <div class="row__seat tooltip" data-tooltip="6-14"></div>
            <div class="row__seat tooltip" data-tooltip="6-15"></div>
            <div class="row__seat tooltip" data-tooltip="6-16"></div>
            <div class="row__seat tooltip" data-tooltip="6-17"></div>
            <div class="row__seat tooltip" data-tooltip="6-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="7-1"></div>
            <div class="row__seat tooltip" data-tooltip="7-2"></div>
            <div class="row__seat tooltip" data-tooltip="7-3"></div>
            <div class="row__seat tooltip" data-tooltip="7-4"></div>
            <div class="row__seat tooltip" data-tooltip="7-5"></div>
            <div class="row__seat tooltip" data-tooltip="7-6"></div>
            <div class="row__seat tooltip" data-tooltip="7-7"></div>
            <div class="row__seat tooltip" data-tooltip="7-8"></div>
            <div class="row__seat tooltip" data-tooltip="7-9"></div>
            <div class="row__seat tooltip" data-tooltip="7-10"></div>
            <div class="row__seat tooltip" data-tooltip="7-11"></div>
            <div class="row__seat tooltip" data-tooltip="7-12"></div>
            <div class="row__seat tooltip" data-tooltip="7-13"></div>
            <div class="row__seat tooltip" data-tooltip="7-14"></div>
            <div class="row__seat tooltip" data-tooltip="7-15"></div>
            <div class="row__seat tooltip" data-tooltip="7-16"></div>
            <div class="row__seat tooltip" data-tooltip="7-17"></div>
            <div class="row__seat tooltip" data-tooltip="7-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="8-1"></div>
            <div class="row__seat tooltip" data-tooltip="8-2"></div>
            <div class="row__seat tooltip" data-tooltip="8-3"></div>
            <div class="row__seat tooltip" data-tooltip="8-4"></div>
            <div class="row__seat tooltip" data-tooltip="8-5"></div>
            <div class="row__seat tooltip" data-tooltip="8-6"></div>
            <div class="row__seat tooltip" data-tooltip="8-7"></div>
            <div class="row__seat tooltip" data-tooltip="8-8"></div>
            <div class="row__seat tooltip" data-tooltip="8-9"></div>
            <div class="row__seat tooltip" data-tooltip="8-10"></div>
            <div class="row__seat tooltip" data-tooltip="8-11"></div>
            <div class="row__seat tooltip" data-tooltip="8-12"></div>
            <div class="row__seat tooltip" data-tooltip="8-13"></div>
            <div class="row__seat tooltip" data-tooltip="8-14"></div>
            <div class="row__seat tooltip" data-tooltip="8-15"></div>
            <div class="row__seat tooltip" data-tooltip="8-16"></div>
            <div class="row__seat tooltip" data-tooltip="8-17"></div>
            <div class="row__seat tooltip" data-tooltip="8-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="9-1"></div>
            <div class="row__seat tooltip" data-tooltip="9-2"></div>
            <div class="row__seat tooltip" data-tooltip="9-3"></div>
            <div class="row__seat tooltip" data-tooltip="9-4"></div>
            <div class="row__seat tooltip" data-tooltip="9-5"></div>
            <div class="row__seat tooltip" data-tooltip="9-6"></div>
            <div class="row__seat tooltip" data-tooltip="9-7"></div>
            <div class="row__seat tooltip" data-tooltip="9-8"></div>
            <div class="row__seat tooltip" data-tooltip="9-9"></div>
            <div class="row__seat tooltip" data-tooltip="9-10"></div>
            <div class="row__seat tooltip" data-tooltip="9-11"></div>
            <div class="row__seat tooltip" data-tooltip="9-12"></div>
            <div class="row__seat tooltip" data-tooltip="9-13"></div>
            <div class="row__seat tooltip" data-tooltip="9-14"></div>
            <div class="row__seat tooltip" data-tooltip="9-15"></div>
            <div class="row__seat tooltip" data-tooltip="9-16"></div>
            <div class="row__seat tooltip" data-tooltip="9-17"></div>
            <div class="row__seat tooltip" data-tooltip="9-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="10-1"></div>
            <div class="row__seat tooltip" data-tooltip="10-2"></div>
            <div class="row__seat tooltip" data-tooltip="10-3"></div>
            <div class="row__seat tooltip" data-tooltip="10-4"></div>
            <div class="row__seat tooltip" data-tooltip="10-5"></div>
            <div class="row__seat tooltip" data-tooltip="10-6"></div>
            <div class="row__seat tooltip" data-tooltip="10-7"></div>
            <div class="row__seat tooltip" data-tooltip="10-8"></div>
            <div class="row__seat tooltip" data-tooltip="10-9"></div>
            <div class="row__seat tooltip" data-tooltip="10-10"></div>
            <div class="row__seat tooltip" data-tooltip="10-11"></div>
            <div class="row__seat tooltip" data-tooltip="10-12"></div>
            <div class="row__seat tooltip" data-tooltip="10-13"></div>
            <div class="row__seat tooltip" data-tooltip="10-14"></div>
            <div class="row__seat tooltip" data-tooltip="10-15"></div>
            <div class="row__seat tooltip" data-tooltip="10-16"></div>
            <div class="row__seat tooltip" data-tooltip="10-17"></div>
            <div class="row__seat tooltip" data-tooltip="10-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="11-1"></div>
            <div class="row__seat tooltip" data-tooltip="11-2"></div>
            <div class="row__seat tooltip" data-tooltip="11-3"></div>
            <div class="row__seat tooltip" data-tooltip="11-4"></div>
            <div class="row__seat tooltip" data-tooltip="11-5"></div>
            <div class="row__seat tooltip" data-tooltip="11-6"></div>
            <div class="row__seat tooltip" data-tooltip="11-7"></div>
            <div class="row__seat tooltip" data-tooltip="11-8"></div>
            <div class="row__seat tooltip" data-tooltip="11-9"></div>
            <div class="row__seat tooltip" data-tooltip="11-10"></div>
            <div class="row__seat tooltip" data-tooltip="11-11"></div>
            <div class="row__seat tooltip" data-tooltip="11-12"></div>
            <div class="row__seat tooltip" data-tooltip="11-13"></div>
            <div class="row__seat tooltip" data-tooltip="11-14"></div>
            <div class="row__seat tooltip" data-tooltip="11-15"></div>
            <div class="row__seat tooltip" data-tooltip="11-16"></div>
            <div class="row__seat tooltip" data-tooltip="11-17"></div>
            <div class="row__seat tooltip" data-tooltip="11-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="12-1"></div>
            <div class="row__seat tooltip" data-tooltip="12-2"></div>
            <div class="row__seat tooltip" data-tooltip="12-3"></div>
            <div class="row__seat tooltip" data-tooltip="12-4"></div>
            <div class="row__seat tooltip" data-tooltip="12-5"></div>
            <div class="row__seat tooltip" data-tooltip="12-6"></div>
            <div class="row__seat tooltip" data-tooltip="12-7"></div>
            <div class="row__seat tooltip" data-tooltip="12-8"></div>
            <div class="row__seat tooltip" data-tooltip="12-9"></div>
            <div class="row__seat tooltip" data-tooltip="12-10"></div>
            <div class="row__seat tooltip" data-tooltip="12-11"></div>
            <div class="row__seat tooltip" data-tooltip="12-12"></div>
            <div class="row__seat tooltip" data-tooltip="12-13"></div>
            <div class="row__seat tooltip" data-tooltip="12-14"></div>
            <div class="row__seat tooltip" data-tooltip="12-15"></div>
            <div class="row__seat tooltip" data-tooltip="12-16"></div>
            <div class="row__seat tooltip" data-tooltip="12-17"></div>
            <div class="row__seat tooltip" data-tooltip="12-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="13-1"></div>
            <div class="row__seat tooltip" data-tooltip="13-2"></div>
            <div class="row__seat tooltip" data-tooltip="13-3"></div>
            <div class="row__seat tooltip" data-tooltip="13-4"></div>
            <div class="row__seat tooltip" data-tooltip="13-5"></div>
            <div class="row__seat tooltip" data-tooltip="13-6"></div>
            <div class="row__seat tooltip" data-tooltip="13-7"></div>
            <div class="row__seat tooltip" data-tooltip="13-8"></div>
            <div class="row__seat tooltip" data-tooltip="13-9"></div>
            <div class="row__seat tooltip" data-tooltip="13-10"></div>
            <div class="row__seat tooltip" data-tooltip="13-11"></div>
            <div class="row__seat tooltip" data-tooltip="V12"></div>
            <div class="row__seat tooltip" data-tooltip="13-13"></div>
            <div class="row__seat tooltip" data-tooltip="13-14"></div>
            <div class="row__seat tooltip" data-tooltip="13-15"></div>
            <div class="row__seat tooltip" data-tooltip="13-16"></div>
            <div class="row__seat tooltip" data-tooltip="13-17"></div>
            <div class="row__seat tooltip" data-tooltip="13-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="14-1"></div>
            <div class="row__seat tooltip" data-tooltip="14-2"></div>
            <div class="row__seat tooltip" data-tooltip="14-3"></div>
            <div class="row__seat tooltip" data-tooltip="14-4"></div>
            <div class="row__seat tooltip" data-tooltip="14-5"></div>
            <div class="row__seat tooltip" data-tooltip="14-6"></div>
            <div class="row__seat tooltip" data-tooltip="14-7"></div>
            <div class="row__seat tooltip" data-tooltip="14-8"></div>
            <div class="row__seat tooltip" data-tooltip="14-9"></div>
            <div class="row__seat tooltip" data-tooltip="14-10"></div>
            <div class="row__seat tooltip" data-tooltip="14-11"></div>
            <div class="row__seat tooltip" data-tooltip="14-12"></div>
            <div class="row__seat tooltip" data-tooltip="14-13"></div>
            <div class="row__seat tooltip" data-tooltip="14-14"></div>
            <div class="row__seat tooltip" data-tooltip="14-15"></div>
            <div class="row__seat tooltip" data-tooltip="14-16"></div>
            <div class="row__seat tooltip" data-tooltip="14-17"></div>
            <div class="row__seat tooltip" data-tooltip="14-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="15-1"></div>
            <div class="row__seat tooltip" data-tooltip="15-2"></div>
            <div class="row__seat tooltip" data-tooltip="15-3"></div>
            <div class="row__seat tooltip" data-tooltip="15-4"></div>
            <div class="row__seat tooltip" data-tooltip="15-5"></div>
            <div class="row__seat tooltip" data-tooltip="15-6"></div>
            <div class="row__seat tooltip" data-tooltip="15-7"></div>
            <div class="row__seat tooltip" data-tooltip="15-8"></div>
            <div class="row__seat tooltip" data-tooltip="15-9"></div>
            <div class="row__seat tooltip" data-tooltip="15-10"></div>
            <div class="row__seat tooltip" data-tooltip="15-11"></div>
            <div class="row__seat tooltip" data-tooltip="15-12"></div>
            <div class="row__seat tooltip" data-tooltip="15-13"></div>
            <div class="row__seat tooltip" data-tooltip="15-14"></div>
            <div class="row__seat tooltip" data-tooltip="15-15"></div>
            <div class="row__seat tooltip" data-tooltip="15-16"></div>
            <div class="row__seat tooltip" data-tooltip="15-17"></div>
            <div class="row__seat tooltip" data-tooltip="15-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="16-1"></div>
            <div class="row__seat tooltip" data-tooltip="16-2"></div>
            <div class="row__seat tooltip" data-tooltip="16-3"></div>
            <div class="row__seat tooltip" data-tooltip="16-4"></div>
            <div class="row__seat tooltip" data-tooltip="16-5"></div>
            <div class="row__seat tooltip" data-tooltip="16-6"></div>
            <div class="row__seat tooltip" data-tooltip="16-7"></div>
            <div class="row__seat tooltip" data-tooltip="16-8"></div>
            <div class="row__seat tooltip" data-tooltip="16-9"></div>
            <div class="row__seat tooltip" data-tooltip="16-10"></div>
            <div class="row__seat tooltip" data-tooltip="16-11"></div>
            <div class="row__seat tooltip" data-tooltip="16-12"></div>
            <div class="row__seat tooltip" data-tooltip="16-13"></div>
            <div class="row__seat tooltip" data-tooltip="16-14"></div>
            <div class="row__seat tooltip" data-tooltip="16-15"></div>
            <div class="row__seat tooltip" data-tooltip="16-16"></div>
            <div class="row__seat tooltip" data-tooltip="16-17"></div>
            <div class="row__seat tooltip" data-tooltip="16-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="17-1"></div>
            <div class="row__seat tooltip" data-tooltip="17-2"></div>
            <div class="row__seat tooltip" data-tooltip="17-3"></div>
            <div class="row__seat tooltip" data-tooltip="17-4"></div>
            <div class="row__seat tooltip" data-tooltip="17-5"></div>
            <div class="row__seat tooltip" data-tooltip="17-6"></div>
            <div class="row__seat tooltip" data-tooltip="17-7"></div>
            <div class="row__seat tooltip" data-tooltip="17-8"></div>
            <div class="row__seat tooltip" data-tooltip="17-9"></div>
            <div class="row__seat tooltip" data-tooltip="17-10"></div>
            <div class="row__seat tooltip" data-tooltip="17-11"></div>
            <div class="row__seat tooltip" data-tooltip="17-12"></div>
            <div class="row__seat tooltip" data-tooltip="17-13"></div>
            <div class="row__seat tooltip" data-tooltip="17-14"></div>
            <div class="row__seat tooltip" data-tooltip="17-15"></div>
            <div class="row__seat tooltip" data-tooltip="17-16"></div>
            <div class="row__seat tooltip" data-tooltip="17-17"></div>
            <div class="row__seat tooltip" data-tooltip="17-18"></div>
        </div>
        <div class="row">
            <div class="row__seat tooltip" data-tooltip="18-1"></div>
            <div class="row__seat tooltip" data-tooltip="18-2"></div>
            <div class="row__seat tooltip" data-tooltip="18-3"></div>
            <div class="row__seat tooltip" data-tooltip="18-4"></div>
            <div class="row__seat tooltip" data-tooltip="18-5"></div>
            <div class="row__seat tooltip" data-tooltip="18-6"></div>
            <div class="row__seat tooltip" data-tooltip="18-7"></div>
            <div class="row__seat tooltip" data-tooltip="18-8"></div>
            <div class="row__seat tooltip" data-tooltip="18-9"></div>
            <div class="row__seat tooltip" data-tooltip="18-10"></div>
            <div class="row__seat tooltip" data-tooltip="18-11"></div>
            <div class="row__seat tooltip" data-tooltip="18-12"></div>
            <div class="row__seat tooltip" data-tooltip="18-13"></div>
            <div class="row__seat tooltip" data-tooltip="18-14"></div>
            <div class="row__seat tooltip" data-tooltip="18-15"></div>
            <div class="row__seat tooltip" data-tooltip="18-16"></div>
            <div class="row__seat tooltip" data-tooltip="18-17"></div>
            <div class="row__seat tooltip" data-tooltip="18-18"></div>
        </div>
    </div>
    <!-- /rows -->
    <ul class="legend">
        <li class="legend__item legend__item--free">空座</li>
        <li class="legend__item legend__item--reserved">已售</li>
        <li class="legend__item legend__item--selected">选中</li>
    </ul>
    <button class="action action--buy" id="chupiao">出票</button>
</div><!-- /plan -->
<button class="action action--lookaround action--disabled" arial-label="Unlook View"></button>
<script src="../js/classie.js"></script>
<script src="../js/main.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../layui/layui.js" charset="utf-8"></script>

</body>
<script>
    $(document).ready(function () {
        var zwei = [];

        <!--获取已售座位-->
        var lss = [];
        <j:forEach items="${seats}" var="sea">
        lss.push("${sea}");
        </j:forEach>
        // var las = lss.substr(lss.indexOf("["),lss.indexOf("]")).split(",");


        $(".row__seat").each(function () {
            $(this).click(function () {
                var column_num = parseInt($(this).index()) + 1;
                var row_num = parseInt($(this).parent().index()) + 1;
                seat_num = row_num + "_" + column_num;
                var se = 1;
                if (zwei.length == 0) {
                    for (var index = 0; index < lss.length; index++) {
                        if (seat_num == lss[index]) {
                            se = 0;
                            break;
                        }

                    }
                    if(se==1){
                    zwei.push(seat_num);
                    }

                } else {
                    for (var index = 0; index < zwei.length; index++) {
                        if (seat_num == zwei[index]) {

                            zwei.splice(index, 1);
                            se = 0;
                            break;
                        }
                        if (index == zwei.length - 1) {
                            se = 1;
                        }
                    }
                    for (var index = 0; index < lss.length; index++) {
                        if (seat_num == lss[index]) {
                            se = 0;
                            break;
                        }

                    }
                    if (se == 1) {
                        zwei.push(seat_num);
                    }
                }


            });
            <!--已售座位颜色变化-->
            $(".row__seat").each(function () {
                var column_num = parseInt($(this).index()) + 1;
                var row_num = parseInt($(this).parent().index()) + 1;

                for (var i = 0; i < lss.length; i++) {
                    var seatL = lss[i].substr(0, lss[i].indexOf("_"));

                    var seatR = lss[i].substr(lss[i].indexOf("_") + 1);

                    if (seatL == row_num && seatR == column_num) {
                        $(this).css("background", "red")
                    }
                }
            });

        });
        $("#chupiao").click(function () {
            var seats = zwei.join(",");
            var amount = zwei.length;
            window.location.href = "/alipay/comsume/" + amount + "/" + seats;

        });
    });
</script>
</html>